<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- immediate-check 页面一打开就调用一次onload 请求数据 默认true  -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <ArticleItem
          v-for="obj in list"
          :key="obj.art_id"
          :listObj="obj"
          @disLikeEV="dislikeFn"
          @reportsEV="reportsFn"
          @click.native="itemClickFn(obj.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticlesAPI, dislikeArticleAPI, reportsArticleAPI } from '@/api'
import ArticleItem from '../../../components/ArticleItem.vue'
import Notify from '@/ui/Notify'
// import { Toast } from 'vant'
/**
 * 问题1：网页刚打开，onload事件也会请求数据，created和onload里的请求同时发送，请求的都是最新数据
 * onload中，两次数据一合并，数据重复， key值也会重复
 * 原因：van-list组件，组件挂载时，默认就会判定一次是否触发
 * 第一页数据也是网络请求来的，是组件中标签先挂载了（布局），数据回来更新DOM，所以此时标签没有高度。list中onload事件也会触发
 * 解决：1.van-list组件文档中有 immediate-check 方法 是否在初始化时立即执行滚动位置检查 默认true，改为false即可 页面一打开不要判定
 * 2.页面一打开，不在 created 中请求数据 因为 immediate-check 默认true。 页面一开打就会发一次请求
 * 3.在onload 中加判断， this.list.length === 0 就return 一开始不执行 让 onload 逻辑代码一开始不执行
 */
export default {
  components: { ArticleItem },
  data () {
    return {
      list: [], // 请求得文章列表
      loading: false, // 加载中效果状态
      finished: false, // 加载完毕状态
      timestamp: new Date().getTime(), // 获取当前时间戳
      isLoading: false
    }
  },
  props: {
    // list: Array
    channelId: Number
  },
  created () {
    this.getArticlesListFn()
  },
  methods: {
    // 请求文章列表
    async getArticlesListFn () {
      const res = await getArticlesAPI({
        channel_id: this.channelId, // 先默认请求推荐频道数据
        timestamp: this.timestamp
      })
      // console.log(res)
      // created() 上来第一次list是空数组，合并空数组没问题
      // onload() 下拉加载更多，请求来的数据合并到数组更没问题
      this.list = [...this.list, ...res.data.data.results] // 合并数组。把分页请求来的数据合并数组中
      // pre_timestamp 下页的时间戳
      // 第一次请求： 系统时间（timesstamp）-> 后台 返回0-9条数据 -> 并携带 pre_timestamp值返回
      // 第二次请求： (timestamp)-上一次pre_timestamp(代表告诉后，从指定的时间戳再往后找10个) 10-19，并带第二十条的 pre_timestamp值返回
      this.timestamp = res.data.data.pre_timestamp
      this.isLoading = false // 顶部加载状态
      if (res.data.data.pre_timestamp === null) {
        // 本次请求过来的数据为最后一次，没有下一段数据了。最后一次 pre_timestamp 是null
        this.finished = true
      }
      this.loading = false // 如果不关闭，则会一直加载状态，下次不会触发onload事件
    },
    // 底部加载事件
    onLoad () {
      // bug: 在上一个频道触发底部加载更多后，切换tab栏会出现key值重复bug
      // 原因：因为immediate-check 内容没有进行判断，滚动监听事件的代码还在，就触发了滚动事件 immediate-check判断无效
      // 解决: 在onload中判断文章列表长度是否为0 为0就加载状态为false
      if (this.list.length === 0) {
        this.loading = false
        return // 如果页面没有数据,没有高度,让本次onload事件逻辑代码不往下执行
      }
      this.getArticlesListFn()
    },
    // 顶部下拉刷新
    onRefresh () {
      // 把list列表清空。重新请求新的数据
      this.list = []
      this.timestamp = new Date().getTime()
      this.getArticlesListFn()
    },
    // 反馈-对文章不感兴趣
    async dislikeFn (id) {
      await dislikeArticleAPI({ artId: id })
      // res里没有什么有用的信息，所以await往下放行，就证明请求和响应是成功的，反馈成功
      // console.log(res)
      Notify({ type: 'success', message: '反馈成功' })
    },
    // 反馈-反馈垃圾内容
    async reportsFn (id, value) {
      await reportsArticleAPI({
        artId: id,
        type: value
      })
      Notify({ type: 'danger', message: '举报成功' })
    },
    // 点击跳转详情页 - 因为加 .native 是给组件的根标签绑定的点击事件 会有冒泡问题。（点击x出反馈面板也跳转路由）要在组件中给x 标签加事件修饰符 .stop 阻止冒泡
    itemClickFn (id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })
    }
  }
}
</script>

<style>
</style>
